<template>
    <div>
      <!-- 按钮触发弹窗 -->
      <el-button type="primary" @click="dialogFormVisible = true">新增图书</el-button>
  
      <!-- 新增图书的弹窗 -->
      <el-dialog title="新增图书" v-model="dialogFormVisible" width="50%">
        <el-form :model="newBook">
          <el-form-item label="书名" :label-width="formLabelWidth">
            <el-input v-model="newBook.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="作者" :label-width="formLabelWidth">
            <el-input v-model="newBook.author" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="ISBN" :label-width="formLabelWidth">
            <el-input v-model="newBook.isbn" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="出版社" :label-width="formLabelWidth">
            <el-input v-model="newBook.publisher" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="出版日期" :label-width="formLabelWidth">
            <el-date-picker
              v-model="newBook.publishDate"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="分类" :label-width="formLabelWidth">
            <el-input v-model="newBook.category" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="库存" :label-width="formLabelWidth">
            <el-input-number v-model="newBook.stock" :min="0"></el-input-number>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="addBook">确定</el-button>
          </span>
        </template>
      </el-dialog>
  
      <!-- 图书列表 -->
      <el-table :data="books" style="width: 100%; margin-top: 20px;">
        <el-table-column prop="title" label="书名" width="180"></el-table-column>
        <el-table-column prop="author" label="作者" width="180"></el-table-column>
        <el-table-column prop="isbn" label="ISBN" width="180"></el-table-column>
        <el-table-column prop="publisher" label="出版社" width="180"></el-table-column>
        <el-table-column prop="publishDate" label="出版日期" width="180"></el-table-column>
        <el-table-column prop="category" label="分类" width="180"></el-table-column>
        <el-table-column prop="stock" label="库存" width="180"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        dialogFormVisible: false, // 控制弹窗显示/隐藏
        formLabelWidth: '100px', // 表单标签宽度
        newBook: {
          title: '',
          author: '',
          isbn: '',
          publisher: '',
          publishDate: '',
          category: '',
          stock: 0
        }, // 新增图书的数据模型
        books: [
          { title: 'Vue.js入门指南', author: '张三', isbn: '1234567890', publisher: '出版社A', publishDate: '2021-01-21', category: 'fenlei', stock: 1 },
          { title: '深入浅出Node.js', author: '李四', isbn: '0987654321', publisher: '出版社B', publishDate: '2022-02-22', category: 'fenlei', stock: 2 }
        ] // 图书数据
      };
    },
    methods: {
      addBook() {
        if (this.newBook.title && this.newBook.author && this.newBook.isbn && this.newBook.publisher && this.newBook.publishDate && this.newBook.category) {
          this.books.push({ ...this.newBook });
          this.dialogFormVisible = false; // 关闭弹窗
          this.newBook = {
            title: '',
            author: '',
            isbn: '',
            publisher: '',
            publishDate: '',
            category: '',
            stock: 0
          }; // 清空输入框
        } else {
          this.$message.warning('请输入完整信息');
        }
      },
      handleEdit(row) {
        console.log('编辑:', row);
        // 这里可以添加编辑逻辑
      },
      handleDelete(index) {
        this.$confirm('确定要删除这本书吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.books.splice(index, 1);
          this.$message.success('删除成功!');
        }).catch(() => {
          this.$message.info('已取消删除');
        });
      }
    }
  };
  </script>
  
  <style scoped>
  /* 可以根据需要自定义样式 */
  </style>